import React, {useEffect, useState} from 'react'
import { Form, Button,Input, Modal, Row, Col} from 'antd'
import { connect } from 'umi'
const FormItem = Form.Item
const { TextArea } = Input;

const formLayout = {
  labelCol: { span: 7 },
}

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
}

const AddForm = (props) => {
  const { onSubmit, onCancel, loading,record,visible} = props
  const [form] = Form.useForm()
  const [title,setTitle] = useState(null)

  useEffect(() => {
    if(record){
      setTitle("编辑配置")
      form.setFieldsValue(record);
    }else{
      setTitle("新增配置")
    }
  }, [visible])

  const onFormCancel = () => {
    form.resetFields()
    onCancel()
  }

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields()
    form.resetFields()
    onSubmit({
      ...fieldsValue,
      id:record && record.id
    })
  }

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="name" label="配置名称" rules={[{required: true, message: '配置名称不能为空'}]}>
             <Input placeholder="请输入配置名称"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="type" label="配置类型" rules={[{required: true, message: '配置类型不能为空'}]}>
              <Input placeholder="请输入配置类型"/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="value" label="配置参数" rules={[{required: true, message: '配置参数不能为空'}]}>
              <Input placeholder="请输入配置参数"/>
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem name="remarks" labelCol={{span: 2}} label="备注">
              <TextArea rows={4} className='widthStyle'/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" loading={loading} onClick={() => handleSubmit()}>提交</Button>
      </>
    )
  }

  return (
    <Modal
      width={1280}
      destroyOnClose
      title={title}
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}

export default connect(() => ({
}))(AddForm)
